<template>
  <div class="out">
    <zHeader pageTitle="商业洞察"></zHeader>

    <!-- 周边客流分析 -->
    <div class="analysis-section">
      <div class="section-header">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48"
            width="25" height="25" style="" filter="none">
            <g>
              <rect width="48" height="48" fill="rgba(24,126,255,1)" fill-opacity="0.01" stroke="none"></rect>
              <path
                d="M19 20C22.866 20 26 16.866 26 13C26 9.13401 22.866 6 19 6C15.134 6 12 9.13401 12 13C12 16.866 15.134 20 19 20Z"
                fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <path d="M32.6077 7C34.6405 8.2249 36.0001 10.4537 36.0001 13C36.0001 15.5463 34.6405 17.7751 32.6077 19"
                stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
              </path>
              <path
                d="M4 40.8V42H34V40.8C34 36.3196 34 34.0794 33.1281 32.3681C32.3611 30.8628 31.1372 29.6389 29.6319 28.8719C27.9206 28 25.6804 28 21.2 28H16.8C12.3196 28 10.0794 28 8.36808 28.8719C6.86278 29.6389 5.63893 30.8628 4.87195 32.3681C4 34.0794 4 36.3196 4 40.8Z"
                fill="none" stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
              </path>
              <path
                d="M43.9999 42V40.8C43.9999 36.3196 43.9999 34.0794 43.128 32.3681C42.361 30.8628 41.1371 29.6389 39.6318 28.8719"
                stroke="rgba(24,126,255,1)" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
              </path>
            </g>
          </svg>
        </div>
        <h3>周边客流分析</h3>
      </div>
      <div class="customer-flow-content">
        <p class="description">周边社区相当密集，拥有庞大的消费客群支撑。商铺处于商业的核心位置，位置优越。附近小区众多，人流非常可观，周边人流量大且稳定。</p>

        <div class="chart-container">
          <h4 class="chart-title">店铺周边客户流量趋势图</h4>
          <div ref="echartsRef" style="width: 100%; height: 260px;"></div>
        </div>
      </div>
    </div>
    <!-- 适合行业 -->
    <div class="analysis-section">
      <div class="section-header">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"
            width="25" height="25" style="" filter="none">

            <g>
              <path
                d="M364.7 189.7l0 238L120.4 427.7l0-238L364.7 189.7M372.1 131.8 113 131.8c-27.9 0-50.5 22.6-50.5 50.5L62.5 435c0 27.9 22.6 50.5 50.5 50.5l259.1 0c27.9 0 50.5-22.6 50.5-50.5L422.6 182.3C422.7 154.4 400 131.8 372.1 131.8L372.1 131.8z"
                p-id="4312" fill="rgba(24,126,255,1)"></path>
              <path
                d="M364.7 657.2l0 238L120.4 895.2l0-238L364.7 657.2M372.1 599.3 113 599.3c-27.9 0-50.5 22.6-50.5 50.5l0 252.7c0 27.9 22.6 50.5 50.5 50.5l259.1 0c27.9 0 50.5-22.6 50.5-50.5L422.6 649.9C422.7 622 400 599.3 372.1 599.3L372.1 599.3z"
                p-id="4313" fill="rgba(24,126,255,1)"></path>
              <path
                d="M838.6 657.2l0 238L594.3 895.2l0-238L838.6 657.2M846 599.3 586.9 599.3c-27.9 0-50.5 22.6-50.5 50.5l0 252.7c0 27.9 22.6 50.5 50.5 50.5L846 953c27.9 0 50.5-22.6 50.5-50.5L896.5 649.9C896.5 622 873.9 599.3 846 599.3L846 599.3z"
                p-id="4314" fill="rgba(24,126,255,1)"></path>
              <path
                d="M732.2 131.8l168.3 168.3L727.8 472.9 559.4 304.6 732.2 131.8M732.2 70.8c-12.9 0-25.9 4.9-35.7 14.8L513.3 268.8c-19.7 19.8-19.7 51.7 0 71.5L692 519c9.9 9.9 22.8 14.8 35.7 14.8 12.9 0 25.9-4.9 35.7-14.8l183.2-183.2c19.7-19.8 19.7-51.8 0-71.5L768 85.7C758.1 75.8 745.1 70.8 732.2 70.8L732.2 70.8z"
                p-id="4315" fill="rgba(24,126,255,1)"></path>
            </g>
          </svg>
        </div>
        <h3>适合行业</h3>
      </div>
      <div class="suitable-industry-content">
        <p class="description">餐饮美食、百货超市、生活服务、娱乐休闲等各行业均可。</p>
      </div>
    </div>
    <!-- 周边配套 -->
    <div class="analysis-section">
      <div class="section-header">
        <div class="icon-wrapper">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1024 1024"
            width="34" height="34" style="" filter="none">
            <g>
              <path
                d="M853.333333 746.666667h-52.906666V416H853.333333c17.493333 0 32-14.506667 32-32 0-12.8-7.68-24.32-19.2-29.44L682.666667 274.346667V229.12l85.333333-37.12-128-55.466667v119.04l-115.2-50.346666a33.28 33.28 0 0 0-25.6 0l-341.333333 149.333333a32.426667 32.426667 0 0 0-16.64 42.24c5.12 11.52 16.64 19.2 29.44 19.2h53.333333v330.666667H170.666667c-17.493333 0-32 14.506667-32 32s14.506667 32 32 32h682.666666c17.493333 0 32-14.506667 32-32s-14.506667-32-32-32z m-469.333333-170.666667H341.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333z m0-85.333333H341.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334z m0-85.333334H341.333333c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333333h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333333z m106.666667-42.666666h42.666666c11.946667 0 21.333333 9.386667 21.333334 21.333333s-9.386667 21.333333-21.333334 21.333333h-42.666666c-11.946667 0-21.333333-9.386667-21.333334-21.333333s9.386667-21.333333 21.333334-21.333333z m0 85.333333h42.666666c11.946667 0 21.333333 9.386667 21.333334 21.333333s-9.386667 21.333333-21.333334 21.333334h-42.666666c-11.946667 0-21.333333-9.386667-21.333334-21.333334s9.386667-21.333333 21.333334-21.333333z m106.666666 298.666667h-170.666666V640c0-46.933333 38.4-85.333333 85.333333-85.333333s85.333333 38.4 85.333333 85.333333v106.666667z m85.333334-170.666667h-42.666667c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333334h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333334s-9.386667 21.333333-21.333333 21.333333z m0-85.333333h-42.666667c-11.946667 0-21.333333-9.386667-21.333333-21.333334s9.386667-21.333333 21.333333-21.333333h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333334z m0-85.333334h-42.666667c-11.946667 0-21.333333-9.386667-21.333333-21.333333s9.386667-21.333333 21.333333-21.333333h42.666667c11.946667 0 21.333333 9.386667 21.333333 21.333333s-9.386667 21.333333-21.333333 21.333333zM426.666667 746.24h170.666666-170.666666zM426.666667 810.24h170.666666-170.666666z"
                fill="rgba(24,126,255,1)" p-id="5407" stroke="none"></path>
            </g>
          </svg>
        </div>
        <h3>周边配套</h3>
      </div>

      <div class="pageOut">
        <div id="mapShow"></div>
        <div id="panel"></div>
        <div class="btnArea">
          <div class="btnItem" :class="{ 'active': selectedBtnIndex == 0 }" @click="btnItemClickHandler('教育', 0)">教育
          </div>
          <div class="btnItem" :class="{ 'active': selectedBtnIndex == 1 }" @click="btnItemClickHandler('交通', 1)">交通
          </div>
          <div class="btnItem" :class="{ 'active': selectedBtnIndex == 2 }" @click="btnItemClickHandler('医疗', 2)">医疗
          </div>
          <div class="btnItem" :class="{ 'active': selectedBtnIndex == 3 }" @click="btnItemClickHandler('生活', 3)">生活
          </div>
          <div class="btnItem" :class="{ 'active': selectedBtnIndex == 4 }" @click="btnItemClickHandler('休闲', 4)">休闲
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import { useRouter } from 'vue-router'
const router = useRouter()
import { postZhouBianPeiTaoList, postZhouBianDingWeiList } from '@/api/zhoubianpeitao/index.js'
import { postXiaoQuDetail ,postXiaoQuLiuLiangList} from '@/api/xiaoqu/index.js'
import { pageConstant } from '@/config/contant.js'
import { getSelectedXiaoQuId } from '@/config/config.js'
import * as echarts from 'echarts'
import { ref, onMounted, watch, nextTick, onBeforeUnmount } from 'vue'

if (!getSelectedXiaoQuId()) {
  showDialog({
    message: '暂无小区数据，请先配置小区',
  }).then(() => {
    router.back()
  })
}

const zhouBianPeiTaoData = ref({})
const ifShowTable = ref(true)
let xiaoQuCityCode = null
let xiaoQuName = ''
//按照周一到周日排序
const dayColors = ['#FF69B4', '#87CEEB', '#F0E68C', '#98D982', '#DDA0DD', '#FFA500', '#C0C0C0']
const dayOrder = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
const loadXiaoQuLiuLiang=()=>{
  postXiaoQuLiuLiangList({ xiaoQuId: getSelectedXiaoQuId() }).then(res => {
    if (res.data.code == pageConstant.okCode) {
      if(res.data.data && res.data.data.length>0){
        customerFlowData.value=res.data.data.map(item=>{
          return {
            day:'周' + item.xingQi,
            value:item.keLiuLiang,
            color:dayColors[dayOrder.indexOf('周' + item.xingQi)]
          }
        })
        
        customerFlowData.value.sort((a, b) => {
          return dayOrder.indexOf(a.day) - dayOrder.indexOf(b.day);
        });
        nextTick(()=>{
          renderEcharts()
        })
      }
    } else {
      showToast(res.data.msg);
    }
  })
    .catch((err) => {
      console.log(err)
    })

}
const loadZhouBianPeiTaoDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postZhouBianPeiTaoList({ xiaoQuId: getSelectedXiaoQuId() }).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      zhouBianPeiTaoData.value = res.data.data

      if (zhouBianPeiTaoData.value.zhouBianPeiTaoList && zhouBianPeiTaoData.value.zhouBianPeiTaoList.length > 0) {
        zhouBianPeiTaoData.value.zhouBianPeiTaoList.forEach(item => {
          item.juLi = item.juLi + 'km'
        })
      } else {
        ifShowTable.value = false
      }

      window._AMapSecurityConfig = {
        securityJsCode: zhouBianPeiTaoData.value.gaoDeMiYao,
      };

      handleZhouBianPeiTaoData()

      initMap()
    } else {
      showToast(res.data.msg);
    }
  })
    .catch((err) => {
      console.log(err)
    })
}
const handleZhouBianPeiTaoData = () => {
  if (!zhouBianPeiTaoData.value.jingDu || !zhouBianPeiTaoData.value.jingDu) {
    showDialog({
      message: '暂无小区经纬度数据',
    }).then(() => {
      router.back()
    })
  }

  if (!zhouBianPeiTaoData.value.bianJu) {
    showDialog({
      message: '暂无查询边距数据',
    }).then(() => {
      router.back()
    })
  }
}
const loadXiaoQuDetailDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postXiaoQuDetail({ xiaoQuId: getSelectedXiaoQuId() }).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      handleXiaoQuCityCode(res)
    } else {
      showToast(res.data.msg);
    }
  })
    .catch((err) => {
      console.log(err)
    })
}
const handleXiaoQuCityCode = (res) => {
  if (res.data.data.xiaoQuWeiZhiMa) {
    xiaoQuCityCode = res.data.data.xiaoQuWeiZhiMa
    xiaoQuName = res.data.data.xiaoQuName
    createXiaoQuMarkerHandler()
  } else {
    showDialog({
      message: '暂无小区城市数据',
    }).then(() => {
      router.back()
    })
  }
}
let otherMarkList = [
  {
    name: '郭公庄站',
    jingDu: '116.301889',
    weiDu: '39.814322'
  }
]

const loadZhouBianDingWeiDataHandler = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
    duration: 0
  });

  postZhouBianDingWeiList({ xiaoQuId: getSelectedXiaoQuId() }).then(res => {
    // 关闭加载中提示
    closeToast();

    if (res.data.code == pageConstant.okCode) {
      otherMarkList = res.data.data.map(item => {
        return {
          name: item.zhouBianDingWeiName,
          jingDu: item.jingDu,
          weiDu: item.weiDu
        }
      })
    } else {
      showToast(res.data.msg);
    }
  })
    .catch((err) => {
      console.log(err)
    })
}
/**
 * 客流量数据 - 响应式数组
 */
const customerFlowData = ref([
  { day: '周一', value: 200, color: '#FF69B4' },
  { day: '周二', value: 220, color: '#87CEEB' },
  { day: '周三', value: 200, color: '#F0E68C' },
  { day: '周四', value: 230, color: '#98D982' },
  { day: '周五', value: 250, color: '#DDA0DD' },
  { day: '周六', value: 380, color: '#FFA500' },
  { day: '周日', value: 450, color: '#C0C0C0' }
])


const echartsRef = ref(null)
let chartInstance = null

function renderEcharts() {
  if (!echartsRef.value) return
  if (!chartInstance) {
    chartInstance = echarts.init(echartsRef.value)
    window.addEventListener('resize', resizeChart)
  }
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: { left: 30, right: 20, top: 30, bottom: 30 },
    xAxis: {
      type: 'category',
      data: customerFlowData.value.map(item => item.day),
      axisTick: { alignWithLabel: true },
      axisLabel: { fontSize: 14 }
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: Math.max(...customerFlowData.value.map(item => item.value)) + 50,
      interval: 2000,
      axisLabel: { fontSize: 12 }
    },
    series: [
      {
        name: '客流量',
        type: 'bar',
        data: customerFlowData.value.map(item => ({ value: item.value, itemStyle: { color: item.color } })),
        barWidth: 32,
        label: {
          show: true,
          position: 'top',
          fontSize: 12
        }
      }
    ]
  }
  chartInstance.setOption(option)
  chartInstance.resize()
}

function resizeChart() {
  if (chartInstance) {
    chartInstance.resize()
  }
}

onMounted(() => {

  loadZhouBianPeiTaoDataHandler()
  loadZhouBianDingWeiDataHandler()
  loadXiaoQuLiuLiang()
})

watch(customerFlowData, () => {
  nextTick(() => {
    renderEcharts()
  })
}, { deep: true })

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
    window.removeEventListener('resize', resizeChart)
  }
})



/**
 * 地图初始化
 */
let map = null;
let searchContent = ''
let amap = null
// 图标中间空心不好看
let otherSvg = `
  <svg viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><style>.cls-1{fill:#00bae6;}.cls-2 { fill: #ffffff;}</style></defs><title/><g id="icons"><g data-name="Layer 3" id="Layer_3"><path class="cls-1" d="M18.72,8.31a10.79,10.79,0,0,0-5.17,5.24A12.74,12.74,0,0,0,14.7,26.81l9.93,14.25,9.92-14.25A12.33,12.33,0,0,0,37,19.36C37,10.6,28,4,18.72,8.31Zm6.08,15.2A4.51,4.51,0,1,1,29.3,19,4.51,4.51,0,0,1,24.8,23.51Z"/><circle class="cls-2" cx="24.8" cy="19" r="4.51"/></g></g></svg>
`
const initMap = () => {
  AMapLoader.load({
    key: zhouBianPeiTaoData.value.gaoDeKey, //此处填入我们注册账号后获取的Key
    version: "2.0", //指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.PlaceSearch'], //需要使用的的插件列表，如比例尺'AMap.Scale'等
  }).then((AMap) => {
    amap = AMap
    map = new AMap.Map("mapShow", { //设置地图容器id
      viewMode: "3D", //是否为3D地图模式
      zoom: 15, //初始化地图级别
      center: [zhouBianPeiTaoData.value.jingDu, zhouBianPeiTaoData.value.weiDu], //初始化地图中心点位置
      resizeEnable: true
    });

    for (let i = 0; i < otherMarkList.length; i++) {
      createOtherMarkerHandler(otherMarkList[i])
    }
    loadXiaoQuDetailDataHandler()

    // 正式用的时候打开，这个每天100次有些不耐用，现在按钮点击时可以正常调用的
    amapPlaceSearchHandler('教育')
  }).catch(e => {
    console.log(e);
  })
}

/**
 * 创建小区mark点
 */
const createXiaoQuMarkerHandler = () => {
  new amap.Marker({
    position: [zhouBianPeiTaoData.value.jingDu, zhouBianPeiTaoData.value.weiDu],
    map: map
  });
  new amap.Text({
    text: xiaoQuName,
    anchor: 'top-center', // 设置文本标记锚点
    offset: [0, -82],
    style: {
      'padding': '.75rem 1rem',
      'border-radius': '.25rem',
      'background-color': '#1684fc',
      'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
      'text-align': 'center',
      'font-size': '16px',
      'color': 'white'
    },
    position: [zhouBianPeiTaoData.value.jingDu, zhouBianPeiTaoData.value.weiDu],
    map: map
  })
}

/**
 * 指定点mark显示
 */
const createOtherMarkerHandler = (markerData) => {
  let icon = new amap.Icon({
    image: 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(otherSvg))),
    size: new amap.Size(36, 36),
    imageSize: new amap.Size(36, 36),
    anchor: 'center'
  })
  new amap.Marker({
    position: [markerData.jingDu, markerData.weiDu],
    offset: [-18, -31],
    icon: icon,
    map: map
  })

  new amap.Text({
    text: markerData.name,
    anchor: 'top-center', // 设置文本标记锚点
    offset: [0, -75],
    style: {
      'padding': '.75rem 1rem',
      'border-radius': '.25rem',
      // 'background-color': '#00cfff',
      // 'background-color': '#00afd6',
      'background-color': '#00bae6',
      'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
      'text-align': 'center',
      'font-size': '16px',
      'color': 'white'
    },
    position: [markerData.jingDu, markerData.weiDu],
    map: map
  })
}

/**
 * 类型按钮功能
 */
const selectedBtnIndex = ref(0)
const btnItemClickHandler = (searchContent, index) => {
  amapPlaceSearchHandler(searchContent)

  selectedBtnIndex.value = index
}

/**
 * 地图关键词搜索功能
 */
let existedMarkersList = []
let placeSearch = null
const amapPlaceSearchHandler = (searchContent) => {
  amap.plugin(["AMap.PlaceSearch"], function () {
    // 清空上一次的地址查询结果
    if (placeSearch) {
      placeSearch.clear();
    }

    // 构造地点查询类
    placeSearch = new amap.PlaceSearch({
      type: searchContent, // 兴趣点类别
      pageSize: 3, // 单页显示结果条数
      pageIndex: 1, // 页码
      city: xiaoQuCityCode, // 兴趣点城市
      citylimit: true,  //是否强制限制在设置的城市内搜索
      map: map, // 展现结果的地图实例
      panel: "panel", // 结果列表将在此容器中进行展示。
      autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
    });

    var cpoint = [zhouBianPeiTaoData.value.jingDu, zhouBianPeiTaoData.value.weiDu]; //中心点坐标
    placeSearch.searchNearBy('', cpoint, zhouBianPeiTaoData.value.bianJu, function (status, result) {
      // 清空上一次的文本标记
      existedMarkersList.forEach(marker => {
        marker.setMap(null)
      });

      result.poiList.pois.forEach(item => {
        // 创建纯文本标记
        let marker = new amap.Text({
          text: item.name,
          anchor: 'top-center', // 设置文本标记锚点
          offset: [0, -80],
          style: {
            'padding': '.75rem 1rem',
            'border-radius': '.25rem',
            'background-color': 'white',
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '14px',
            'color': 'blue'
          },
          position: [item.location.lng, item.location.lat],
          map: map
        })

        existedMarkersList.push(marker)
      })
    });
  });
}
</script>

<style lang="scss" scoped>
.out {
  min-height: 100dvh;
  width: 100vw;
  background-color: #f5f5f5;

  .analysis-section {
    background: white;
    margin: 10px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .section-header {
      display: flex;
      width: 160px;
      margin-left:10px;
      margin-bottom: 10px;
      align-items: center;
      padding: 10px 10px 0px 10px;
      border-bottom: 1px solid #d0d0d0;



      .icon-wrapper {
        margin-right: 12px;
        

        .icon {
          width: 24px;
          height: 24px;
        }
      }

      h3 {
        font-size: 16px;
        margin: 0;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .customer-flow-content,
    .suitable-industry-content {
      padding:0 20px;

      .description {
        margin: 0 0 20px 0;
        color: #666;
        line-height: 1.6;
        font-size: 14px;
      }

      .chart-container {
        .chart-title {
          text-align: center;
          margin: 0 0 20px 0;
          font-size: 16px;
          color: #333;
          font-weight: 600;
        }

        .chart-wrapper {
          display: flex;
          align-items: flex-end;
          position: relative;
          background: #f9f9f9;
          padding: 20px;
          border-radius: 8px;

          .chart-bars {
            display: flex;
            align-items: flex-end;
            justify-content: space-around;
            width: 100%;
            height: 120px;

            .bar-wrapper {
              display: flex;
              flex-direction: column;
              align-items: center;
              flex: 1;

              .bar {
                width: 30px;
                min-height: 20px;
                border-radius: 4px 4px 0 0;
                transition: all 0.3s ease;
                margin-bottom: 8px;
              }

              .bar-label {
                font-size: 12px;
                color: #666;
                font-weight: 500;
              }
            }
          }

          .chart-axis {
            position: absolute;
            left: 0;
            top: 0;
            height: 100%;
            display: flex;
            flex-direction: column-reverse;
            justify-content: space-between;
            padding: 20px 0;

            .axis-label {
              font-size: 10px;
              color: #999;
              line-height: 1;
            }
          }
        }
      }
    }

    .facilities-list {
      padding: 0 20px 20px;

      .facility-item {
        display: flex;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;

        &:last-child {
          border-bottom: none;
        }

        .facility-icon {
          margin-right: 12px;
          color: #667eea;

          .icon {
            width: 20px;
            height: 20px;
          }
        }

        .facility-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          flex: 1;

          .facility-name {
            color: #333;
            font-size: 14px;
          }

          .facility-distance {
            color: #666;
            font-size: 12px;
          }
        }
      }
    }
  }

  .tableOut {
    padding: 10px 20px;
    padding-bottom: 0;

    ::v-deep .vant-table-wrapper {
      border: 1px solid #ebedf0;
      border-bottom: 0;
    }
  }

  .pageOut {
    width: 100%;
    min-height: 520px;
    padding: 20px;
    padding-top: 10px;
    position: relative;
    box-sizing: border-box;
    justify-items: center;

    #mapShow {
      width: 100%;
      height: 300px;
      border-radius: 8px;
      overflow: hidden;
    }

    #panel {
      background-color: white;
      max-height: 90%;
      overflow-y: auto;
      width: 100%;
      border-radius: 8px;
      margin-top: 10px;

      ::v-deep .poi-name {
        max-width: 100%;
      }
    }

    .btnArea {
      display: flex;
      border: 1px solid rgb(22, 132, 252);
      border-right: 0px;
      border-radius: 5px;
      position: absolute;
      top: 280px;
      overflow: hidden;
      box-shadow: 0 2px 8px rgba(22, 132, 252, 0.3);
      z-index: 1000;


      .btnItem {
        height: 32px;
        width: 60px;
        border-right: 1px solid #1684fc;
        background-color: #fff;
        color: rgb(22, 132, 252);
        line-height: 32px;
        text-align: center;
        font-weight: 500;
        font-size: 12px;
        transition: all 0.3s ease;

        &:last-child {
          border-right: none;
        }
      }

      .active {
        background-color: rgb(22, 132, 252);
        color: #fff;
      }
    }
  }
}
</style>